<template>
  <div class="home_box">
     首页
  </div>

</template>

<script>
    import {onMounted,toRefs,reactive} from 'vue'
    export default {
        name: 'Home',
        setup(){
            onMounted(()=>{
               console.log(1111)
            });
            return{

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.home_box{
  width: 100%;
  position: relative;
  height: 100%;
  .tabs{
    width: 100%;
    padding:0 20px;
    background: #000;
    display: flex;
    flex-wrap: wrap;
    >li{
      color: #999999;
      font-size: 18px;
      padding: 0 10px;
      line-height: 60px;
      transition: all 0.5s;
    }
    li.active{
      font-size: 20px;
      color: #1890ff;
    }
    li:hover{
      color: #1890ff;
      cursor: pointer;
      font-size: 20px;
    }
  }
  .conent{
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
    right: 0;
    background: #f1f1f1;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
